<template>
  <div class="container">
    <a class="back" @click="$router.push({name: 'examPlan'})"><i class="el-icon-back"></i><span>返回</span></a>
    <p class="big-font">设置考试时间</p>
    <P class="middle-font">考试时间设置</P>
    <el-form ref="form" :model="form" label-width="140px" style="width:60%">
      <el-form-item label="考试天数">
        <el-select style="width: 100%;" v-model="form.days" placeholder="考试天数">
          <el-option label="1天" value="1"></el-option>
          <el-option label="2天" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="考试日期">
        <el-col :span="11">
          <el-date-picker type="date" @change="checkTime" placeholder="选择日期"  v-model="form.beginDate" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" style="text-align:center">-</el-col>
        <el-col :span="11">
          <el-date-picker type="date" @change="checkTime" placeholder="选择日期" v-model="form.endDate" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="修改计划截止时间">
        <el-date-picker type="date" placeholder="选择日期"  v-model="form.resetDeadline" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="考试时长(分钟)">
        <el-input v-model="form.duration">
        </el-input>
      </el-form-item>
      <el-form-item label="考试间隔时间(分钟)">
        <el-input v-model="form.timeLapse"></el-input>
      </el-form-item>
      <el-form-item label="上午考试开始时间">
        <el-time-picker
        style="width: 100%;"
            v-model="form.mBeginDate"
            format="HH:mm"
            :picker-options="{
              selectableRange: '06:00:00 - 12:00:00'
            }"
            placeholder="任意时间点">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="上午考试批数">
        <el-input v-model="form.mBatches"></el-input>
      </el-form-item>
      <el-form-item label="下午考试开始时间">
        <el-time-picker style="width: 100%;"
          v-model="form.fBeginDate"
          format="HH:mm"
          :picker-options="{
            selectableRange: '12:00:00 - 20:00:00'
          }"
          placeholder="任意时间点">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="下午考试批数">
        <el-input v-model="form.fBatches"></el-input>
      </el-form-item>
    </el-form>
    <p style="margin-top:40px;" class="middle-font">补考时间设置</p>
      <el-form ref="form" :model="form" label-width="140px" style="width:60%">
        <el-form-item label="第一场补考时间">
          <el-time-picker
          style="width: 100%;"
          format="HH:mm"
          is-range
          v-model="oBeginTime"
          range-separator="-"
          start-placeholder="开始时间"
          :default-value="defaultTime"
          end-placeholder="结束时间"
          placeholder="选择时间范围">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="第二场补考时间">
        <el-time-picker
        style="width: 100%;"
          is-range
          :default-value="defaultTime"
          format="HH:mm"
          v-model="tBeginTime"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="报名截止日期">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.signDate" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-form>

    <p class="ann">注：每场考试候考时间自动设置为<input class="diy-input" v-model="form.presetTime" type="text"/> 提前分钟</p>
    <hr style="width:100%;height:1px;background:#f5f5f5;margin-top:20px;margin-bottom:20px;">
    <div class="btn">
      <a href="javascript:;" class="save" @click="savePlan">确定</a>
      <a href="" class="cancel">取消</a>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data () {
    return {
      form: {
        beginDate: '',
        days: '',
        duration: '',
        endDate: '',
        fBeginDate: new Date(new Date().toLocaleDateString()).getTime() + 13 * 60 * 60 * 1000,
        fBatches: '',
        mBatches: '',
        mBeginDate: new Date(new Date().toLocaleDateString()).getTime() + 8 * 60 * 60 * 1000,
        oBeginTime: '',
        oEndTime: '',
        presetTime: 30,
        signDate: '',
        tBeginTime: '',
        tEndTime: '',
        timeLapse: '',
        resetDeadline: ''
      },
      oBeginTime: '',
      tBeginTime: '',
      defaultTime: new Date(new Date().toLocaleDateString()).getTime() + 20 * 60 * 60 * 1000
    }
  },
  methods: {
    async savePlan () {
      if (!this.form.beginDate || !this.form.endDate) {
        this.$message.error('请先选择考试时间！')
        return
      }

      if (!this.oBeginTime || !this.tBeginTime) {
        this.$message.error('请先选择补考时间！')
        return
      }

      if (new Date(this.form.resetDeadline).getTime() >= new Date(this.form.beginDate).getTime()) {
        this.$message.error('修改计划截止时间不能比考试日期晚！')
        return
      }

      console.log(this.form.presetTime, this.form.timeLapse)
      if (parseInt(this.form.presetTime) < parseInt(this.form.timeLapse)) {
        this.$message.error('考试提前时间必须大于考试间隔时间！')
        return
      }

      this.form.oBeginTime = this.dealTime(this.oBeginTime[0])
      this.form.oEndTime = this.dealTime(this.oBeginTime[1])
      this.form.tBeginTime = this.dealTime(this.tBeginTime[0])
      this.form.tEndTime = this.dealTime(this.tBeginTime[1])

      // if()

      // console.log(this.form, this.oBeginTime)
      let res = await this.$http.setExamTime(this.form)
      if (res.code === 20000) {
        this.$message.success('设置成功！')
        this.$router.push({ name: 'examPlan' })
      } else {
        this.$message.error(res.msg)
      }
    },
    checkTime () {
      if (this.form.endDate) {
        if (this.form.beginDate) {
          if (this.form.beginDate > this.form.endDate) {
            this.$message.error('开始时间不能大于结束时间！')
            this.form.endDate = ''
          } else {
            this.form.fBeginDate = new Date(this.form.beginDate).getTime() + 13 * 60 * 60 * 1000
            this.form.mBeginDate = new Date(this.form.beginDate).getTime() + 8 * 60 * 60 * 1000
            // this.oBeginTime = this.beginDate
            // this.tBeginTime = this.form.beginDate
          }
        }
      }
    },
    dealTime(str) {
      let time = new Date(str).getTime() % 86400000 + 8*3600000
      let pre = new Date(this.form.beginDate).getTime()
      return new Date(time+pre)
    }
  }
}
</script>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
.container
  width calc(100% - 50px)
  min-height 658px
  background #fff
  border-radius 5px
  padding 30px 25px
  .back
    cursor pointer
    font-size 14px
    color color
    span
      margin-left 10px
  .big-font
    margin-top 16px
    font-size 18px
    font-weight bold
    margin-top 10px
  .middle-font
    margin-top 22px
    margin-bottom 20px
    font-size 16px
    font-weight bold
    margin-top 12px
    margin-bottom 15px
  .ann
    color #999
    border-bottom 1px solid #eeeeee
    margin-bottom 30px
    padding-bottom 15px
    .diy-input
      width 58px
      height 30px
      line-height 66px
      font-size 16px
      color #333
      border-radius 5px
      border 1px solid #e0e0e0
      margin 0 6px
      text-align center
  .btn
    a
      display inline-block
      width 70px
      height 38px
      text-align center
      line-height 38px
      border-radius 5px
      color #fff
      text-decoration none
      margin-right 14px
      &.save
        background color
      &.cancel
        color color
        border 1px solid color

</style>

<style>
.el-form-item__label {
  text-align: left;
}
</style>
